<!--该组件为承保一张图页面-->

<template>
  <!--承保一张图页面容器，用于容纳其他组件及设置页面背景图-->
 <div class="under-write-map-container">
   <!--页面左侧展示区容器-->
   <div class="left-bar-pot">
     <!--应用左侧展示区组件-->
     <LeftBar :leftBarData="leftBarData"></LeftBar>
   </div>
   <!--中间地图页面容器留给吕工-->
   <div class="map-pot">

   </div>
   <!--页面右侧展示区容器-->
   <div class="right-bar-pot">
     <!--应用右侧展示区组件-->
     <right-bar></right-bar>
   </div>
 </div>
</template>

<script>
//引入左侧展示区组件及右侧展示区组件
import LeftBar from "@/views/business/underwriteMap/LeftBar.vue";
import RightBar from "@/views/business/underwriteMap/RightBar.vue";
export default {
  components:{
    //注册左侧展示区组件及右侧展示区组件
    LeftBar,
    RightBar
  },
  data(){
    return {
      leftBarData:[
        {
          chartTitle:'2023年春季预防虫害承保档案',
          chartBody:[
            {
              label:'承保亩数',
              value:'200'
            },
            {
              label:'承保金额',
              value:'1000'
            },
            {
              label:'承保用户',
              value:'张三'
            },
          ]
        },
        {
          chartTitle:'2023年春季冰雪灾害承保档案',
          chartBody:[
            {
              label:'承保亩数',
              value:'300'
            },
            {
              label:'承保金额',
              value:'2000'
            },
            {
              label:'承保用户',
              value:'李四'
            },
          ]
        },
        {
          chartTitle:'2023年春季预防火灾承保档案',
          chartBody:[
            {
              label:'承保亩数',
              value:'500'
            },
            {
              label:'承保金额',
              value:'1200'
            },
            {
              label:'承保用户',
              value:'王五'
            },
          ]
        },
        {
          chartTitle:'2023年春季预防洪涝灾害承保档案',
          chartBody:[
            {
              label:'承保亩数',
              value:'800'
            },
            {
              label:'承保金额',
              value:'1400'
            },
            {
              label:'承保用户',
              value:'陈六'
            },
          ]
        },
        {
          chartTitle:'2023年春季预防人祸承保档案',
          chartBody:[
            {
              label:'承保亩数',
              value:'700'
            },
            {
              label:'承保金额',
              value:'9000'
            },
            {
              label:'承保用户',
              value:'刘某某'
            },
          ]
        },
      ]
    }
  },
  activated(){
    //发送请求获取搜索框下拉列表需要的数据

    //发送请求获取承保档案表数据


  }
}
</script>

<style lang="scss" scoped>
//引入全局样式
@import "@/assets/styles/businessTheme.scss";
  //设置页面容器样式
  .under-write-map-container{
    //设置宽高
    width:100%;
    height:$page-body-height;  //高度设为全局样式中的页面高度
    display: flex; //使其中元素横向排列
    //设置背景图片

    // 设置页面左侧展示区容器样式
    .left-bar-pot{
      //设置宽高
      width:25%;
      height:100%;
      //background: #BBFFAA; //仅用于页局查看
      display: flex;
      justify-content: center;  //设置内中LeftBar组件居中显示
    }
    // 设置中间地图页面容器样式
    .map-pot{
      //设置宽高
      width:50%;
      height:100%;
      //background: #BBAAFF; //仅用于页局查看
    }

    // 设置页面右侧展示区容器样式
    .right-bar-pot{
      //设置宽高
      width:25%;
      height:100%;
      //background: #AAFFBB; //仅用于页局查看
      display: flex;
      justify-content: center;  //设置内中LeftBar组件居中显示
    }
  }
</style>
